<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { report } from '@/package_tools/api/Home'
	import { timeFormat } from '@/uni_modules/uview-plus';

	const today = ref(new Date());
	const year = ref(today.value.getFullYear());
	const month = ref(today.value.getMonth() + 1);

	const tabIndex = ref(0)

	const useTabs = () => {
		const tabsList = reactive([
			{
				name: '日报',
				id: 0
			},
			{
				name: '月报',
				id: 1
			},
			{
				name: '年报',
				id: 2
			}
		])
		return {
			tabsList
		}
	}
	const { tabsList } = useTabs()
	const toPage = (id : number) => {
		tabIndex.value = id
		getDetail()
	}
	onShow(() => {
		getDetail()
	})

	const useGetDetail = () => {
		const data = ref()

		const detailInfo = ref({})

		const getDetail = async () => {
			if (tabIndex.value == 0) {
				data.value = timeFormat(today.value, 'yyyy-mm-dd')
			}
			if (tabIndex.value == 1) {
				data.value = timeFormat(`${year.value}-${month.value.toString().padStart(2, '0')}`, 'yyyy-mm')
			}
			if (tabIndex.value == 2) {
				data.value = year.value
			}
			const params = {
				date: data.value
			}
			const res = await report(params)
			detailInfo.value = res.data
		}

		return {
			detailInfo,
			getDetail
		}
	}
	const { getDetail, detailInfo } = useGetDetail()
</script>

<template>
	<view class="content">
		<view class="" v-if="detailInfo.length">


			<view class="mian-header">
				<view :class="tabIndex == index ? 'header-box' : 'header-box1'" v-for="(item, index) in tabsList"
					:key="index" @tap="toPage(item.id)">{{item.name}}</view>
			</view>
			<view class="main-mixn">
				<view class="mixn-header">
					<view class="left">
						<image style="width: 60rpx;height: 60rpx;" src="/static/icon/icon12.png"></image>
					</view>
					<view class="right">
						<view class="right-name">订单金额</view>
						<view class="right-text">{{detailInfo.order?.order_money}}</view>
					</view>
				</view>
				<view class="mixn-box">
					<view class="box">
						<view class="box-name">订单收款</view>
						<view class="box-text">{{detailInfo.order?.order_sk}}</view>
					</view>
					<view class="box">
						<view class="box-name">订单退款</view>
						<view class="box-text">{{detailInfo.order?.order_tk}}</view>
					</view>
					<!-- <view class="box">
					<view class="box-name">收预付款</view>
					<view class="box-text">{{detailInfo.order?.yfs}}</view>
				</view> -->
					<view class="box">
						<view class="box-name">预付支出</view>
						<view class="box-text">{{detailInfo.order?.yfz}}</view>
					</view>
				</view>
				<view class="mixn-box">
					<!-- <view class="box">
					<view class="box-name">账期收款</view>
					<view class="box-text">{{detailInfo.order?.zqs}}</view>
				</view> -->
					<view class="box">
						<view class="box-name">账期待结</view>
						<view class="box-text">{{detailInfo.order?.zqd}}</view>
					</view>
					<view class="box">
						<view class="box-name">待收金额</view>
						<view class="box-text">{{detailInfo.order?.gz}}</view>
					</view>
					<view class="box">
						<view class="box-name">挂账金额</view>
						<view class="box-text">{{detailInfo.order?.gzje}}</view>
					</view>
				</view>
				<!-- <view class="mixn-box">
				<view class="box">
					<view class="box-name">待收金额</view>
					<view class="box-text">{{detailInfo.order?.gz}}</view>
				</view>
			</view> -->

				<view style="padding: 30rpx;box-sizing: border-box;">
					<view class="mixn-line"></view>
					<u-row customStyle="margin: 20rpx 0rpx">
						<u-col span="6">
							<view class="demo-layout">实收金额：<text
									style="color: rgba(2, 14, 36, 1);">{{detailInfo.order?.ss}}</text></view>
						</u-col>
						<u-col span="6">
							<view class="demo-layout">出库货值：<text
									style="color: rgba(2, 14, 36, 1);">{{detailInfo.order?.out_money}}</text></view>
						</u-col>
					</u-row>
					<view class="mixn-line"></view>
					<u-row customStyle="margin: 20rpx 0rpx">
						<u-col span="6">
							<view class="demo-layout">服务费用：<text
									style="color: rgba(2, 14, 36, 1);">{{detailInfo.order?.service_money}}</text></view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="mian-box">
				<view class="box-header">
					<view class="header-left">
						<view class="left-line"></view>
						<view class="left-name">销售数据</view>
						<view class="left-text">（元）</view>
					</view>
					<!-- <view class="header-right">
					<up-icon name="arrow-right" size="24rpx" color="rgba(155, 157, 158, 1)"></up-icon>
				</view> -->
				</view>
				<view class="box-foot">
					<view class="foot-box">
						<view class="foot-name">订单数量</view>
						<view class="foot-text">{{detailInfo.xs?.order_count}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">收款金额</view>
						<view class="foot-text">{{detailInfo.xs?.order_sk}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">挂账金额</view>
						<view class="foot-text">{{detailInfo.xs?.gz}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">账期待结</view>
						<view class="foot-text">{{detailInfo.xs?.zqd}}</view>
					</view>
				</view>
			</view>
			<view class="mian-box">
				<view class="box-header">
					<view class="header-left">
						<view class="left-line1"></view>
						<view class="left-name">退款数据</view>
						<view class="left-text">（元）</view>
					</view>
					<!-- <view class="header-right">
					<up-icon name="arrow-right" size="24rpx" color="rgba(155, 157, 158, 1)"></up-icon>
				</view> -->
				</view>
				<view class="box-foot">
					<view class="foot-box">
						<view class="foot-name">订单数量</view>
						<view class="foot-text">{{detailInfo.tk?.order_count}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">退款金额</view>
						<view class="foot-text">{{detailInfo.tk?.order_money}}</view>
					</view>
				</view>
			</view>
			<view class="mian-box">
				<view class="box-header">
					<view class="header-left">
						<view class="left-line2"></view>
						<view class="left-name">预付收款</view>
						<view class="left-text">（元）</view>
					</view>
					<!-- <view class="header-right">
					<up-icon name="arrow-right" size="24rpx" color="rgba(155, 157, 158, 1)"></up-icon>
				</view> -->
				</view>
				<view class="box-foot">
					<view class="foot-box">
						<view class="foot-name">预收笔数</view>
						<view class="foot-text">{{detailInfo.yf?.count}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">预收存入</view>
						<view class="foot-text">{{detailInfo.yf?.yfs}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">预收支出</view>
						<view class="foot-text">{{detailInfo.yf?.yfz}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">预存余额</view>
						<view class="foot-text">{{detailInfo.yf?.balance}}</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 80rpx;"></view>
		</view>
		<view v-else style="padding: 24rpx;">
			<up-empty mode="data" icon="/static/img/404.png" text="版本升级中,敬请期待！">
			</up-empty>

		</view>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		background: rgba(242, 243, 245, 1);
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS 11.2及以上 */


		.mian-header {
			.header-box {
				display: inline-block;
				width: 128rpx;
				height: 56rpx;
				border-radius: 6rpx;
				background: rgba(54, 116, 242, 1);
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
			}

			.header-box1 {
				display: inline-block;
				width: 128rpx;
				height: 56rpx;
				border-radius: 6rpx;
				background: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(19, 20, 21, 1);
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
			}
		}

		.main-mixn {
			width: 100%;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(255, 255, 255, 1);
			box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);
			margin-top: 40rpx;

			.mixn-header {
				width: 100%;
				height: 122rpx;
				border-radius: 12rpx 12rpx 0rpx 0rpx;
				background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(15, 98, 254, 0.07) 100%);
				box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);
				display: flex;
				padding: 30rpx;
				box-sizing: border-box;

				.left {
					margin-right: 20rpx;
				}

				.right {
					.right-name {
						font-size: 26rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
						margin-bottom: 10rpx;
					}

					.right-text {
						font-size: 32rpx;
						font-weight: 700;
						color: rgba(245, 99, 81, 1);
					}
				}
			}

			.mixn-box {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				box-sizing: border-box;

				.box {
					width: 202rpx;
					height: 118rpx;
					border-radius: 6rpx;
					padding: 30rpx;
					box-sizing: border-box;
					background: linear-gradient(180deg, rgba(242, 243, 245, 1) 0%, rgba(242, 243, 245, 0.1) 100%);

					.box-name {
						font-size: 26rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
						margin-bottom: 20rpx;
					}

					.box-text {
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(2, 14, 36, 1);
					}
				}
			}


			.mixn-line {
				width: 100%;
				height: 2rpx;
				background: rgba(242, 243, 245, 1);
			}

			.demo-layout {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(100, 101, 102, 1);
			}

		}

		.mian-box {
			width: 100%;
			height: 200rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 8rpx 4rpx 22rpx rgba(55, 131, 252, 0.05);
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 40rpx;

			.box-header {
				display: flex;
				justify-content: space-between;

				.header-left {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.left-line {
						width: 6rpx;
						height: 28rpx;
						border-radius: 2rpx;
						background: rgba(255, 195, 0, 1);
						margin-right: 20rpx;
					}

					.left-line1 {
						width: 6rpx;
						height: 28rpx;
						border-radius: 2rpx;
						background: rgba(42, 130, 228, 1);
						margin-right: 20rpx;
					}

					.left-line2 {
						width: 6rpx;
						height: 28rpx;
						border-radius: 2rpx;
						background: rgba(121, 72, 234, 1);
						margin-right: 20rpx;
					}

					.left-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(2, 14, 36, 1);
					}

					.left-text {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
					}
				}
			}

			.box-foot {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.foot-box {
					.foot-name {
						font-size: 26rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
					}

					.foot-text {
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(2, 14, 36, 1);
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>